<template>
  <section 
    class="relative bg-gradient-to-br from-gray-50 via-blue-50 to-purple-50 py-20 md:py-40" 
    style="background-image: url('/bg_products.png'); background-size: cover; background-position: center;"
  >
    <div class="relative mx-auto px-4 max-w-6xl">
      <div class="max-w-3xl">
        <h1 class="text-2xl md:text-4xl  font-bold mb-3 md:mb-6 text-gray-900">
          {{ title }}
        </h1>
        <p class="text-[0.8rem]  md:text-xl text-gray-700 leading-relaxed w-2/3 md:w-3/4">
          {{ description }}
        </p>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
defineProps<{
  title: string
  description: string
}>()
</script>

